<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3417935_2ocohmhi1nl.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3424875_iro93ctspef.css">
    <link rel="stylesheet" href="../css/header-footer.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/person.css">
</head>

<body>


    <div class="topbar">
        <div class="topbar-container w">
            <ul class="topbar-nav">
                <li><a href="">小米商城</a><span>|</span></li>
                <li><a href="">MIUI</a><span>|</span></li>
                <li><a href="">loT</a><span>|</span></li>
                <li><a href="">云服务</a><span>|</span></li>
                <li><a href="">天星数科</a><span>|</span></li>
                <li><a href="">有品</a><span>|</span></li>
                <li><a href="">小爱开放平台</a><span>|</span></li>
                <li><a href="">企业团购</a><span>|</span></li>
                <li><a href="">资质证照</a><span>|</span></li>
                <li><a href="">协议规则</a><span>|</span></li>
                <li class="topbar-download">
                    <a href="">下载app</a>
                    <span>|</span>
                    <span class="appcode">
                        <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
                        <i style="color: #000;">小米商城APP</i>
                    </span>
                </li>
                <li><a href="">Select Location</a></li>
            </ul>
            <div class="topbar-right">
                <ul class="topbar-login-reg">
                    <ul class="topbar-login-reg topbar-login-reg-on">
                        <li><a href="../html/Xiaomi_login.html">登录</a><span>|</span></li>
                        <li><a href="../html/Xiaomi_reg.html">注册</a><span>|</span></li>
                        <li><a href="">消息通知</a></li>
                    </ul>
                    <ul class="topbar-login-reg personal-center">
                        <li class="user-id"><a href=""></a></li>
                        <li class="exit"><a>退出帐号</a></li>
                    </ul>
                </ul>
                <div class="cart"><i class="iconfont icon-xiazai1"></i>购物车<span>(0)</span>
                    <div class="cart-list">购物车空空如也</div>
                </div>

            </div>
        </div>
    </div>

    <header>
        <div class="header-container w">
            <h1><a href=""><img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt=""></a></h1>
            <ul class="header-nav">
                <li class="header-nav-one"><a href="">Xiaomi手机</a>
                    <div class="hide">
                        <ul class="hide-list">
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88ae9b85c5f8fbdae2ea98d58a045e1e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi 1S</h5>
                                    <strong>2299起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02ac31f8d3848f71617e074e8e50879e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12 Pro</h5>
                                    <strong>4699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34eec49ce46adcd4739e60a2b56062fc.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12</h5>
                                    <strong>3699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/075d45f17b32b39c98be850a5592bbee.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12X</h5>
                                    <strong>2999起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fea69fb5990da9dfc909aa8279aaea7e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 青春活力版</h5>
                                    <strong>1799起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi</h5>
                                    <strong>2299起</strong>
                                </a></li>
                        </ul>
                    </div>
                </li>

                <li class="header-nav-two"><a href="">Redmi红米</a>
                    <div class="hide">
                        <ul class="hide-list">
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88ae9b85c5f8fbdae2ea98d58a045e1e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi 1S</h5>
                                    <strong>2299起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02ac31f8d3848f71617e074e8e50879e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12 Pro</h5>
                                    <strong>4699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34eec49ce46adcd4739e60a2b56062fc.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12</h5>
                                    <strong>3699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/075d45f17b32b39c98be850a5592bbee.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12X</h5>
                                    <strong>2999起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fea69fb5990da9dfc909aa8279aaea7e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 青春活力版</h5>
                                    <strong>1799起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi</h5>
                                    <strong>2299起</strong>
                                </a></li>
                        </ul>
                    </div>
                </li>
                <li class="header-nav-three"><a href="">电视</a></li>
                <li class="header-nav-four"><a href="">笔记本</a></li>
                <li class="header-nav-five"><a href="">平板</a></li>
                <li class="header-nav-six"><a href="">家电</a></li>
                <li class="header-nav-seven"><a href="">路由器</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>
            </ul>
            <div class="search">
                <input type="text" class="search-text">
                <div class="search-btn">
                    <i class="iconfont icon-fangdajing"></i>
                </div>
            </div>

        </div>


    </header>

    <div class="breadcrumbs">
        <div class="breadcrumbs-container w">
            <a href="../html/Xiaomi_index.html">首页</a>
            <em>/</em>
            <span>个人中心</span>
        </div>
    </div>

    <div class="mi-user-portal">
        <div class="user-container w">
            <div class="user-left">
                <h5>订单中心</h5>
                <ul>
                    <li>我的订单</li>
                    <li>评价晒单</li>
                    <li>话费充值订单</li>
                    <li>以旧换新订单</li>
                </ul>

                <h5>个人中心</h5>
                <ul>
                    <li class="me-person">我的个人中心</li>
                    <li>消息通知</li>
                    <li>购买资格</li>
                    <li>现金账户</li>
                    <li>小米礼品卡</li>
                    <li>现金券</li>
                    <li>喜欢的商品</li>
                    <li>优惠券</li>
                    <li class="delivery-address">收货地址</li>
                    <li>红包</li>
                </ul>

                <h5>售后服务</h5>
                <ul>
                    <li>服务记录</li>
                    <li>申请服务</li>
                    <li>领取快递报销</li>
                </ul>

                <h5>账户管理</h5>
                <ul>
                    <li>个人信息</li>
                    <li class="amend-pwd-two">修改密码</li>
                    <li>注销服务</li>
                </ul>
            </div>

            <div class="user-right">
                <div class="user-right-main">
                    <div class="user-card">
                        <img src="https://img1.baidu.com/it/u=1434533787,33664708&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                            alt="">
                        <div>
                            <h2 class="person-id"></h2>
                            <p>你好哟~</p>
                            <h4 class="amend-pwd-one">修改密码></h4>
                        </div>
                    </div>
                    <div class="user-actions">
                        <p>账户安全：<em>普通</em></p>
                        <p>绑定手机：<span class="person-phone"></span></p>
                        <p>绑定邮箱：<span>未绑定</span></p>


                    </div>

                </div>
                <div class="portal-sub">
                    <ul>
                        <li>
                            <img src="https://s01.mifile.cn/i/user/portal-icon-1.png" alt="">
                            <div>
                                <h5>待支付订单:<span>0</span></h5>
                                <p>查看待支付订单></p>
                            </div>
                        </li>
                        <li>
                            <img src="https://s01.mifile.cn/i/user/portal-icon-2.png" alt="">
                            <div>
                                <h5>待收货的订单:<span>0</span></h5>
                                <p>查看待收货订单></p>
                            </div>
                        </li>
                        <li>
                            <img src="https://s01.mifile.cn/i/user/portal-icon-3.png" alt="">
                            <div>
                                <h5>待评价商品数:<span>0</span></h5>
                                <p>查看待评价商品></p>
                            </div>
                        </li>
                        <li>
                            <img src="https://s01.mifile.cn/i/user/portal-icon-4.png" alt="">
                            <div>
                                <h5>喜欢的商品:<span>0</span></h5>
                                <p>查看喜欢的商品></p>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>

    <div class="amend-pwd">
        <h3>修改密码</h3>
        <p>手机号: <input type="text" placeholder="请输入手机号" class="amend-pwd-phone"></p>
        <span class="amend-pwd-phone-ts">&emsp;</span>
        <p>新密码: <input type="text" placeholder="请输入新密码" class="amend-pwd-pwd"> </p>
        <div>
            <button class="confirm">确定</button>
            <button class="cancel">取消</button>
        </div>
    </div>

    <div class="location">
        <h3><span>添加收货地址</span><em class="location-qx-two">×</em></h3>
        <div class="location-one">
            <em>选择地址：</em>
            <span>省</span><select name="" id="province">
                <option value="">请选择</option>
            </select>
            <span>市</span><select name="" id="city">
                <option value="">请选择</option>
            </select>
            <span>区</span><select name="" id="area">
                <option value="">请选择</option>
            </select>
        </div>
        <div class="location-two">
            <textarea placeholder="详细地址"></textarea>
        </div>
        <div class="location-btn">
            <button class="location-qr">确定</button>
            <button class="location-qx">取消</button>
        </div>
    </div>


    <div class="footer">
        <div class="footer-container w">
            <ul class="footer-service">
                <li>
                    <a href="">
                        <i class="iconfont icon-weixiubanshou"></i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-7tiantuihuanhuo"></i>
                        <span>7天无理由退货</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-tian"></i>
                        <span>15天免费换货</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-liwuhuodong"></i>
                        <span>满69元包邮</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-didian"></i>
                        <span>520余家售后网点</span>
                    </a>
                </li>
            </ul>

            <div class="footerlinks">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd><a href="">售后政策</a></dd>
                    <dd><a href="">自助服务</a></dd>
                    <dd><a href="">相关下载</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd><a href="">小米之家</a></dd>
                    <dd><a href="">服务网点</a></dd>
                    <dd><a href="">授权体验店/专区</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd><a href="">了解小米</a></dd>
                    <dd><a href="">加入小米</a></dd>
                    <dd><a href="">投资者关系</a></dd>
                    <dd><a href="">企业社会责任</a></dd>
                    <dd><a href="">廉洁举报</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd><a href="">新浪微博</a></dd>
                    <dd><a href="">官方微信</a></dd>
                    <dd><a href="">联系我们</a></dd>
                    <dd><a href="">公益基金会</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>特色服务</dt>
                    <dd><a href="">F码通道</a></dd>
                    <dd><a href="">礼物码</a></dd>
                    <dd><a href="">防伪查询</a></dd>
                </dl>
                <div class="col-contact">
                    <h3>400-100-5678</h3>
                    <p>8:00-18:00(仅收市话费)</p>
                    <a class="col-contact-service" href="">
                        <em class="iconfont icon-liuyan"></em>
                        <span>人工服务</span>
                    </a>
                    <h5><span>关注小米:</span>
                        <a href=""><i class="iconfont icon-xinlang"></i></a>
                        <a href=""><i class="iconfont icon-weixin"></i></a>
                    </h5>
                </div>
            </div>
        </div>
    </div>

    <div class="into">
        <div class="into-container w">
            <div class="into-logo">
                <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="">
            </div>
            <div class="into-text">
                <h5>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 |
                    问题反馈 | Select Location</h5>
                <h5>北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会</h5>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
                <p>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
                <p>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证</p>
                <p>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                <div class="into-links">
                    <img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
                    <img src="https://s01.mifile.cn/i/v-logo-2.png" alt="">
                    <img src="https://xyt.xinchacha.com/img/icon/icon3.png" alt="">
                    <img src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
                    <img src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/1e68ce1fd7b9088931ef06942f02c99d.png"
                        alt="">
                </div>
            </div>

        </div>
        <div class="slogan w">让全球每个人都能享受科技带来的美好生活</div>
    </div>

    <script src="../js/jq.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/promise_ajax.js"></script>
    <script>
        const oNoLogin = document.querySelector('.topbar-login-reg-on');
        const oLogin = document.querySelector('.personal-center');
        const oUesrId = document.querySelector('.user-id a');
        const oExit = document.querySelector('.exit');
        // console.log(oExit);
        let login_res = localStorage.getItem('xiaomi_xiaomi_');
        // console.log(login_res);
        if (login_res) {
            oLogin.style.display = 'flex';
            oNoLogin.style.display = 'none';
            oUesrId.innerHTML = login_res;
        }
        else {
            oNoLogin.style.display = 'flex';
            oLogin.style.display = 'none';
        }



        //去购物车
        $('.cart').on('click',function(){
            if(login_res){
                location.href='Xiaomi_cart.html';
            }
            else{
                const url = location;
                location.href='Xiaomi_login.html?accURL='+ url;
            }
        })

        //退出
        oExit.onclick = function () {

            location.href = './Xiaomi_index.html';
            localStorage.removeItem('xiaomi_xiaomi_');
        }
        $('.person-id').html(login_res);
        $('.person-phone').html(login_res);

        //下拉菜单
        $('.user-left h5').on('click', function () {
            console.log(this);
            $(this).next().slideToggle(300, () => {
                console.log(6);
            })
        })

        //修改密码
        $('.amend-pwd-one').on('click', function () {
            $('.amend-pwd-phone').val('');
            $('.amend-pwd-pwd').val('');
            $('.amend-pwd').css("display", "flex");
            $('.amend-pwd-phone').on('blur', function () {
                let userphone = $('.amend-pwd-phone').val();
                // console.log(userphone);
                // console.log(login_res);
                $('.amend-pwd-pwd').on('blur', function () {
                    let userpwd = $('.amend-pwd-pwd').val();
                    // console.log(userphone,userpwd);
                    if (userphone === login_res) {
                        //确定
                        $('.confirm').on('click', function () {
                            amend_pwd({
                                userphone,
                                userpwd
                            }).then(res => {
                                console.log(res);
                                $('.amend-pwd').css("display", "none");
                            })
                        })
                    }
                    else {
                        $('.amend-pwd-phone-ts').css("color", "red");
                        $('.amend-pwd-phone-ts').html('手机号有误')
                    }
                })
            })
            //取消
            $('.cancel').on('click', function () {
                $('.amend-pwd').css("display", "none");
            })


        })


        $('.delivery-address').on('click', function () {
            $('.location').css("display", "block");

            //X
            $('.location-qx-two').on('click', function () {
                $('.location').css("display", "none");
            })

            //取消
            $('.location-qx').on('click', function () {
                $('.location').css("display", "none");
            })

            ajax({
                type: 'get',
                path: '../data/s_city.json',
                cb: data => {
                    const { list } = data;
                    console.log(list);

                    let proHTML = ' <option value="">请选择</option>';
                    list.forEach(v => {
                        const { name } = v;
                        proHTML += `<option value="${name}">${name}</option>`
                    })
                    // console.log(proHTML);
                    $('#province').html(proHTML);
                    // console.log($('#province'));
                    $('#province').on('change', function () {
                        const oproVal = this.value;
                        console.log(oproVal);
                        if (oproVal) {
                            let citysArr = list.filter(v => v.name === oproVal)[0].list;
                            // console.log(citysArr); 
                            let cityHTML = '<option value="">请选择</option>';
                            citysArr.forEach(v => {
                                const { name } = v;
                                cityHTML += `<option value="${name}">${name}</option>`
                            })
                            $('#city').html(cityHTML);

                            $('#city').on('change', function () {
                                const ocityVal = this.value;
                                console.log(ocityVal);
                                if (ocityVal) {
                                    let areaArr = citysArr.filter(v => v.name === ocityVal)[0].list;
                                    console.log(areaArr)
                                    let areaHTML = '<option value="">请选择</option>';
                                    if (areaArr) {
                                        areaArr.forEach(v => {
                                            const { name } = v;
                                            areaHTML += `<option value="${name}">${name}</option>`;
                                        })
                                        $('#area').html(areaHTML);

                                        //确认
                                        $('.location-qr').on('click', function () {
                                            $('.location').css("display", "none");
                                        })
                                    }
                                    else {
                                        $('#area').html('<option value="">请选择</option>');
                                        //确认
                                        $('.location-qr').on('click', function () {
                                            $('.location').css("display", "none");
                                        })
                                    }
                                }
                                else {
                                    $('#area').html('<option value="">请选择</option>');
                                }
                            })
                        }
                        else {
                            $('#city').html('<option value="">请选择</option>');
                            $('#area').html('<option value="">请选择</option>');
                        }
                        if ($('#city').html() == '') {
                            $('#area').html('<option value="">请选择</option>');
                        }
                    })
                }
            })
        })



    </script>


</body>

</html>